<template>
  <el-drawer
    v-model="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :with-header="false"
    size="50%"
    body-class="draw-content"
  >
    <div class="drawer-container">
      <div class="header">
        <div class="title">账户减款转账申请</div>
        <div class="btn-wrap" style="margin-right: 40px">
          <el-button @click="handleCancel"> 取消 </el-button>
          <el-button
            style="background-color: #039691; color: #fff"
            @click="handleSubmit"
          >
            确定
          </el-button>
        </div>
      </div>
      <div class="line" />

      <div class="content">
        <el-card shadow="never">
          <div class="title">今日汇率：</div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in rateList" :key="index"
              ><div class="rates">
                {{ item.foundationCurrencyName }}-{{
                  item.settlementCurrencyName
                }}
                (汇率{{ item.amount }}{{ item.foundationCurrencyName }}={{
                  item.currentExchangerate
                }}{{ item.settlementCurrencyName }})
              </div></el-col
            >
          </el-row>
        </el-card>

        <!-- 账户与余额信息 -->
        <div class="info-list">
          <div class="row">
            <div class="label">
              钱包余额（{{ selectDictLabel(bus_currency_type, curCoinType) }}）
            </div>
            <div class="value">{{ balance }}</div>
          </div>
          <!-- <div class="row">
            <div class="label">预估可减款金额（USD）</div>
            <div class="value">$ {{ estimateDeductUSD.toLocaleString() }}</div>
          </div> -->
          <!-- <div class="row">
            <div class="label">转出账户名称</div>
            <div class="value">
              {{ accountName }}
            </div>
          </div> -->
          <div class="row">
            <div class="label">推广链接</div>
            <div class="value">
              {{ props.accountInfo?.promotionLink }}
            </div>
          </div>

          <div class="row">
            <div class="label">转出账户ID</div>
            <div class="value">
              {{ props.accountInfo?.oeid }}
            </div>
          </div>
        </div>

        <!-- 表单区 -->
        <div class="form-area">
          <el-form label-width="160px">
            <el-form-item
              :label="`转出金额（${selectDictLabel(
                bus_currency_type,
                curCoinType
              )}）`"
              required
            >
              <el-input-number
                v-model="transferAmount"
                placeholder="请输入"
                style="width: 220px"
              />
              <el-checkbox v-model="clearToZero" style="margin-left: 16px">
                清零
              </el-checkbox>
            </el-form-item>
            <!-- <el-form-item label="钱包到账金额（EUR）">
              <el-input
                :model-value="receiveAmountEUR"
                disabled
                style="width: 220px"
              />
            </el-form-item> -->
          </el-form>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import {
  getExchangeRateList,
  transAccountFund,
} from "@/api/customer_handle/index.js";
import { getUserInfo } from "@/api/login";
import { onMounted, ref } from "vue";

import { selectDictLabel } from "@/utils/ruoyi.js";

const { proxy } = getCurrentInstance();
const { bus_currency_type } = proxy.useDict("bus_currency_type");

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  accountInfo: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["update:value", "onSuccess"]);

const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});

// 表单项
const transferAmount = ref();
const clearToZero = ref(false);

const rateList = ref([]);
const balance = ref(0);
const curCoinType = ref("");
function getRateList() {
  getExchangeRateList().then(({ data }) => {
    rateList.value = data;
  });
}

async function handleSubmit() {
  try {
    if (!transferAmount.value) {
      proxy.$modal.msgError("请输入减款金额");
      return;
    }
    if (Number(transferAmount.value) > balance.value) {
      proxy.$modal.msgError("减款金额不能大于账户余额");
      return;
    }
    const params = {
      mediaId: props.accountInfo.id,
      transactionsType: "1",
      amount: clearToZero.value ? balance.value : transferAmount.value,
    };
    await transAccountFund([params]);
    visible.value = false;
    emits("onSuccess");
    proxy.$modal.msgSuccess("操作成功");
  } catch (error) {
    throw new Error(error);
  }
  // 提交占位
  // visible.value = false;
}

function handleCancel() {
  visible.value = false;
}

function fetchUserInfo() {
  getUserInfo().then(({ data }) => {
    balance.value = data.accountBalance;
    curCoinType.value = data.currencyType;
  });
}

onMounted(() => {
  getRateList();
  fetchUserInfo();
});
</script>

<style lang="scss">
.drawer-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .line {
    width: 100%;
    height: 1px;
    margin-top: 10px;
    background: #dcdfe6;
  }

  .content {
    padding: 24px 40px;
    display: flex;
    flex-direction: column;

    .rates-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      color: #333;
      line-height: 26px;
      font-size: 14px;
      .rate-col {
        white-space: pre-wrap;
        > div {
          margin: 4px 0;
        }
      }
    }

    .info-list {
      margin-top: 28px;
      .row {
        display: flex;
        align-items: center;
        margin: 14px 0;
        .label {
          width: 220px;
          color: #606266;
          font-size: 14px;
        }
        .value {
          color: #303133;
          font-weight: 600;
          font-size: 15px;
        }
      }
    }

    .form-area {
      margin-top: 16px;
      :deep(.el-form-item__label) {
        font-size: 14px;
        color: #303133;
      }
      :deep(.el-input.is-disabled .el-input__wrapper) {
        background-color: #f5f7fa;
      }
      :deep(.el-input__wrapper) {
        height: 40px;
      }
      :deep(.el-checkbox) {
        margin-left: 8px;
      }
    }
  }
}

.rates {
  color: #606266;
  font-size: 13px;
  line-height: 22px;
}
</style>
